<template>
  <div>
    <h3 class="title">经销商帐号切换</h3>
    <el-table
      v-loading="load"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      highlight-current-row
      border>
      <el-table-column align="center" label="操作" fixed min-width="120px">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search.key"
            size="mini"
            placeholder="输入关键字进行搜索"
            clearable/>
        </template>
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.DEALER_STATUS == 10111002 " class="item" content="帐号切换" placement="bottom">
            <el-button
              class="el-icon-user"
              size="mini"
              type="text"
              style="font-size: 20px;"
              @click="dealerLogin(scope.row)"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="DEALER_CODE" label="帐号代码"/>
      <el-table-column prop="DEALER_NAME" label="帐号名称" align="left"/>
      <el-table-column prop="ORG_NAME" label="组织名称" align="left"/>
      <el-table-column :formatter="filterCode" prop="DEALER_STATUS" label="帐号状态" type="1011"/>
    </el-table>
    <div style="text-align:center">
      <Pagination
        :data="page"
        @change-size="handleSizeChange"
        @change-page="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  getDealerInfo
} from '@/api/admin/auth/userInfo'
import Pagination from '@/components/Pagination'
import formMixins from '@/mixins/formMixins'
import { initUserData } from '@/api/login'

export default {
  name: 'DealerChg',
  components: {
    Pagination
  },
  mixins: [formMixins],
  data() {
    return {
      load: false,
      data: [],
      search: {
        limit: 10,
        pageNum: 1,
        key: ''
      },
      page: {}
    }
  },
  watch: {
    'search.key': {
      handler(newVal, oldVal) {
        this.getDealerInfo()
      },
      deep: true
    }
  },
  mounted() {
    this.getDealerInfo()
  },
  methods: {
    getDealerInfo() {
      getDealerInfo(this.search).then(res => {
        this.load = false
        this.data = res.rows
        this.page = res
      })
    },
    handleCurrentChange(page) {
      this.search.pageNum = page
      this.getDealerInfo()
    },
    handleSizeChange(size) {
      this.search.limit = size
      this.getDealerInfo()
    },
    dealerLogin(row) {
      this.$store
        .dispatch('dealerLogin', {
          username: row.DEALER_CODE
        })
        .then(accountFrom => {
          debugger
          initUserData({
            accountFrom
          }).then((res) => {
            // this.loading = false
            const path = this.$route.query.redirect
              ? this.$route.query.redirect
              : '/'
            this.$router.push({ path: path })
            localStorage.setItem('codeId', res.DATA_TYPE)
            location.reload()
          })
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style scoped>
  .title {
    padding-left: 30px;
  }

  .setting-box {
    width: 500px;
  }

</style>
